<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/js/vue.js"></script>
    <title>Document</title>
    <style type="text/css">
        .grid {
          margin: auto;
          width: 500px;
          text-align: center;
        }
        .grid table {
          width: 100%;
          border-collapse: collapse;
        }
        .grid th,td {
          padding: 10;
          border: 1px dashed orange;
          height: 35px;
          line-height: 35px;
        }
        .grid th {
          background-color: orange;
        }
        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: orange;
        }
      </style>
</head>
<body>
<div id="app">
    <div class="grid">
        <h1>图书管理</h1>
        <div class="book">
            <div>
              <label for="id">
                编号：
              </label>
              <input type="text" id="id" v-model.number='id'>
              <label for="name">
                名称：
              </label>
              <input type="text" id="name" v-model='name'>
              <button @click="addbook">提交</button>
            </div>
          </div>
        <table>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="b in books" :key="b.id">
                <td>{{b.id}}</td>
                <td>{{b.name}}</td>
                <td>{{b.date}}</td>
                <td>
                    <a @click="delbook(b.id)" href="#">删除</a>
                    <a @click="toedit(b.id)" href="#">修改</a>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
var vm = new Vue({
      el: '#app',
      data: {
        flag: false,  //修改的标志
        id:'',
        name:'',
        books: [{
          id: 1,
          name: '三国演义',
          date: ''
        },{
          id: 2,
          name: '水浒传',
          date: ''
        },{
          id: 3,
          name: '红楼梦',
          date: ''
        },{
          id: 4,
          name: '西游记',
          date: ''
        }]
      },
      methods:{
        delbook(id){
            console.log("删除....",id );
            let sz = this.books.filter( item=> item.id!=id )
            this.books = sz 
        },
        addbook(){
            if(this.flag) { //改
                this.books.some( item=>{
                    if(item.id == this.id ){
                        item.name = this.name
                        return true;
                    }
                });
                this.flag = false 
            }else{  //新增
                let obj = {id: this.id, name: this.name,  date: ''}
                this.books.push(obj)
            }    
        },
        toedit(id){
            this.flag = true 
            console.log('找....', id );
            let sz = this.books.filter( item=> item.id==id )
            console.log( sz[0] );
            this.id  = sz[0].id
            this.name  = sz[0].name
        }
      } 

});
</script>
</html>